import React from 'react';
import './App.css';
import 'antd/dist/antd.css';
import UsePaginationExample from './example/usePagination';
import {
  Divider,
  Form,
  Tabs,
  Space,
  Tag,
  Row,
  Col,
  Input,
  Button,
  Radio,
} from 'antd';
import FormItemExample from './example/useFormInput';
import { useStore } from './store';
import { useObserver } from 'mobx-react';
import { useHistory } from 'react-router';
import { Menu, Item, Separator, Submenu, MenuProvider } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.min.css';
import { TabData } from './store/UIState';

function Tags() {
  const { UIState } = useStore();
  const history = useHistory();
  return useObserver(() => {
    const menuId = `menu-for-tag`;
    return (
      <React.Fragment>
        <Space size={4}>
          {UIState.tabs.map((tab, index) => {
            const tag = (
              <Tag
                title={tab.pathname}
                color={UIState.currentTab === tab ? 'blue' : 'default'}
                closable={UIState.isTabClosable}
                onClose={() => UIState.closeTab(tab)}
                onClick={() => {
                  if (UIState.currentTab === tab) {
                    return;
                  }
                  history.push(UIState.tabToUrl(tab));
                }}
                key={UIState.toTabUID(tab)}
              >
                {UIState.tabToUrl(tab)}
              </Tag>
            );
            return UIState.isTabClosable ? (
              <MenuProvider
                id={menuId}
                data={{ tab }}
                key={UIState.toTabUID(tab)}
              >
                {tag}
              </MenuProvider>
            ) : (
              tag
            );
          })}
        </Space>
        <Menu id={menuId} style={{ zIndex: 9999 }}>
          <Item
            onClick={(argv) => {
              const tab = ((argv.props as unknown) as any).tab as TabData;
              UIState.closeTab(tab);
            }}
          >
            关闭
          </Item>
          <Item
            onClick={(argv) => {
              const tab = ((argv.props as unknown) as any).tab as TabData;
              UIState.closeOtherTabs(tab);
            }}
          >
            关闭其他
          </Item>
          <Item
            onClick={() => {
              UIState.closeAll();
            }}
          >
            关闭全部
          </Item>
        </Menu>
      </React.Fragment>
    );
  });
}

function App() {
  const history = useHistory();
  const { UIState } = useStore();
  return (
    <div className='App'>
      <Tabs defaultActiveKey='mobx-example'>
        <Tabs.TabPane key='hook-example' tab='hook'>
          <FormItemExample />
          <Divider />
          <UsePaginationExample></UsePaginationExample>
        </Tabs.TabPane>
        <Tabs.TabPane key='mobx-example' tab='mobx'>
          <Row gutter={[16, 16]}>
            <Col span={24}>
              <Tags />
            </Col>
            <Col>
              <Form
                layout='inline'
                initialValues={{
                  method: 'push',
                }}
                onFinish={(store: any) => {
                  const targetUrl =
                    (store.pathname || history.location.pathname) +
                    (store.search || history.location.search) +
                    (store.hash || history.location.hash);
                  if (store.method === 'push') {
                    history.push(targetUrl);
                  } else if (store.method === 'replace') {
                    history.replace(targetUrl);
                  } else {
                    UIState.updateTab({
                      pathname: store.pathname || history.location.pathname,
                      search: store.search || history.location.search,
                      hash: store.hash || history.location.hash,
                    });
                  }
                }}
              >
                <Form.Item name='method' label='method'>
                  <Radio.Group>
                    <Radio.Button value='push'>push</Radio.Button>
                    <Radio.Button value='replace'>replace</Radio.Button>
                    <Radio.Button value='update'>update</Radio.Button>
                  </Radio.Group>
                </Form.Item>
                <Form.Item name='pathname' label='pathname'>
                  <Input />
                </Form.Item>
                <Form.Item name='search' label='search'>
                  <Input type='text' />
                </Form.Item>
                <Form.Item name='hash' label='hash'>
                  <Input />
                </Form.Item>
                <Form.Item>
                  <Button htmlType='submit'>确定</Button>
                </Form.Item>
              </Form>
            </Col>
          </Row>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}

export default App;
